Overview

The DualListSelector is a TransformationBean™ that generates the appropriate HTML 4.0 and JavaScript for creating a list-to list selector. A DualListSelector enables you to move single or multiple items between two list boxes and submit items that are selected in the target list box.

Here are the steps for creating a simple DualListSelector:

1. Create a ListModel.
2. Create a DualListSelector
3. Set the model on the DualListSelector.
4. Render the DualListSelector.

This sample shows how to create and render a JSP DualListSelector. The Full Code tab in this sample contains the complete code for all of the customizations below.

This example contains the following customizations:

• Changing properties on the buttons, labels and ListBoxes
• Changing style classes
• Changing the selector visuals using templates

A default DualListSelector looks like the following:

Changing properties on the buttons, labels and ListBoxes

You might want to change properties of the components in the DualListSelector. You might want to change the text of the source and target labels, change the text of the submit button, add tooltips to the buttons, set an initial selected item in the source list, or add onClick methods to the components in the DualListSelector.

To change the properties described below, first follow these steps:

1. Add the following imports to the top of the JSP file.

<%@page import="com.sas.servlet.tbeans.html.Button"%>
<%@page import="com.sas.servlet.tbeans.html.Label"%>
<%@page import="com.sas.servlet.tbeans.form.html.ListBox"%>
<%@page import="com.sas.servlet.tbeans.dualselector.html.DualListSelector"%>

2. Set render="false" in the DualListSelector tag to create the DualListSelector without rendering it (writing it out) yet.

   <sas:DualListSelector id="dualListSelector1" model="listmodel" render="false" />

3. Add the code to change the properties that you want to change in scriptlet code before the DualListSelector is written out.

   <%
      Add your code to change the properties here
   %>

4. Put the following code in just before the </body> to render the DualListSelector.

   <sas:DualListSelector ref="dualListSelector1" render="true"/>

After you have completed the above steps, you are ready to make the following customizations:

To get a component in the DualListSelector, you would call getComponent, passing in the name of the component you'd like to get. For example:

   Button rightButton = 
   (Button)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_RIGHT_BUTTON);

To add a tool tip to a button, you would call setTitle on that button, passing in the text of the tool tip. For example:

   rightButton.setTitle("Move To Target");

To display the move all right or move all left button, you would call setVisible(true) on that button. For example:

   Button rightAllButton = 
   (Button)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_RIGHT_ALL_BUTTON);

   rightAllButton.setVisible(true);

To change the image or text displayed on a button, you would call setImage or setTitle on that button, passing in the image location or text for that button. For example:

   Button submitButton = 
   (Button)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_SUBMIT_BUTTON);

   submitButton.setLabel("OK");

To change the text of the source or target label, you would call setText on that label, passing in the new text. For example:

   Label sourceLabel = 
   (Label)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_SOURCE_LABEL);

   sourceLabel.setText("Available");

To set the selected item in the source list box, you would call setSelectedItem on the source component, passing in the selected item. For example:

   ListBox sourceListBox = 
   (ListBox)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_SOURCE);

   sourceListBox.setSelectedItem("Item 2");

To set an action to occur when you click on the target list box, call setOnClick on the target component, passing in the method or code you'd like to execute. For example:

   ListBox targetListBox = 
   (ListBox)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_TARGET);

   targetListBox.setOnClick("alert('target listbox clicked')");

You can see some of these changes in the following screen capture:

Changing style classes

To change the styles, you should perform these tasks:

1. Add the following imports at the top of your JSP file:

<%@page import="com.sas.servlet.tbeans.StyleInfo"%>
<%@page import="java.util.Map"%>

2. Add the following styles in the <head> section of your JSP file:

<style> 
    .myContainer { border-style: dashed; border-width: medium;border-color: #F1EACB;}
    .mySourceListBox, .myTargetListBox{ width:200; color:#3872ac;}
    .mySourceLabel, .myTargetLabel{background-color="#3872ac";color:#F1EACB;font-family: 
                     Trebuchet MS, Helvetica, sans-serif;font-weight: bold;}
    </style>

3. Set render="false" in the DualListSelector tag to create the DualListSelector without rendering it (writing it out) yet.

<sas:DualListSelector id="dualListSelector1" model="listmodel" render="false" />

4. Add the following code to change the default style classes before the selector is written out, for example, just before the </body> tag.

<%
Map map = dualListSelector1.getStyleMap();
map.put(DualListSelector.DUALSELECTOR_CONTAINER, new StyleInfo("myContainer"));
map.put(DualListSelector.DUALSELECTOR_SOURCE_LISTBOX, new StyleInfo("mySourceListBox"));
map.put(DualListSelector.DUALSELECTOR_TARGET_LISTBOX, new StyleInfo("myTargetListBox"));
map.put(DualListSelector.DUALSELECTOR_SOURCE_LABEL_AREA, new StyleInfo("mySourceLabel"));
map.put(DualListSelector.DUALSELECTOR_TARGET_LABEL_AREA, new StyleInfo("myTargetLabel"));
%>

5. Put the following code in just before the </body> to render the DualListSelector.

<sas:DualListSelector ref="dualListSelector1" render="true"/>

You will get a DualListSelector that looks like:

Changing the selector visuals using templates

You might want to change the visuals of the DualListSelector by creating your own template. The following customization shows you how to remove the target list move up/down buttons, move the submit button to the right side from the center, and add a component below the source list box.

To create your own template and apply it to the DualListSelector, follow these steps:

1. Create a new template file named DualListSelector_Custom.html in the templates directory of your Web application.
2. Add the following template code to the new file you just created.

<table border="0" cellspacing="0" cellpadding="0" class="%DUALSELECTOR_CONTAINER"> <tr> <td class="%DUALSELECTOR_SOURCE_LABEL_AREA">%DUALSELECTOR_SOURCE_LABEL</td> <td> </td> <td class="%DUALSELECTOR_TARGET_LABEL_AREA">%DUALSELECTOR_TARGET_LABEL</td> </tr> <tr> <td>%DUALSELECTOR_SOURCE </td> <td valign="center" align="center" nowrap="nowrap"> <table> <tr> <td>%DUALSELECTOR_RIGHT_BUTTON</td> </tr> <tr> <td>%DUALSELECTOR_LEFT_BUTTON</td> </tr> <tr> <td height="10px"></td> </tr> <tr> <td>%DUALSELECTOR_RIGHT_ALL_BUTTON</td> </tr> <tr> <td>%DUALSELECTOR_LEFT_ALL_BUTTON</td> </tr> </table> </td> <td>%DUALSELECTOR_TARGET</td> </tr> <tr><td>%DUALSELECTOR_TEXTENTRY</td></tr> <tr> <td colspan="3" align="right">%DUALSELECTOR_SUBMIT_BUTTON</td> </tr> </table>

3. Add the following import to the top of the JSP file.

<%@page import="com.sas.servlet.tbeans.form.html.TextEntry"%>

4. Set render="false" in the DualListSelector tag to create the DualListSelector without rendering it (writing it out) yet.

<sas:DualListSelector id="dualListSelector1" model="listmodel" render="false" />

5. Add the following code before the selector is written out.

<% dualListSelector1.setTemplateFileName("DualListSelector_Custom.html"); TextEntry textentry = new TextEntry(); textentry.setName("search"); dualListSelector1.setComponent("DUALSELECTOR_TEXTENTRY", textentry); %>

6. Put the following code in just before the </body> to render the DualListSelector.

<sas:DualListSelector ref="dualListSelector1" render="true"/>

You will get a DualListSelector that looks like this:

Additional Documentation

• For a list of samples for common tasks, see SAS Note 32218.
• The SAS AppDev Studio Developer's Site contains detailed information that will assist you when developing Web applications with SAS AppDev Studio, including an API reference and the custom tag reference for the sas tagset.

---

These sample files and code examples are provided by SAS Institute Inc. "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Recipients acknowledge and agree that SAS Institute shall not be liable for any damages whatsoever arising out of their use of this material. In addition, SAS Institute will provide no support for the materials contained herein.

Instructions

1. Build a new Web application project in SAS AppDev Studio. No web application template is needed.
2. Create new jsp pages using the code below. Note: To use the changeTemplate.jsp file below, you must also use the DualListSelector_Custom.html template file
3. Execute the jsp page on the test Tomcat server.

Tip: For help with building a Web application project and testing a Web application, see SAS Note 32218.

Code for defaultView.jsp

<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="javax.swing.DefaultListModel"%>

<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
</head>
<body>

<%
	DefaultListModel listModel = new DefaultListModel();
	listModel.addElement("Item 1");
	listModel.addElement("Item 2");
	listModel.addElement("Item 3");
	listModel.addElement("Item 4");
	listModel.addElement("Item 5");
	listModel.addElement("Item 6");
	session.setAttribute("listModel", listModel); 
%>

	<sas:DualListSelector id="dualListSelector1" model="listModel" render="true" />
</body>
</html>

Code for changeProperties.jsp

<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="javax.swing.DefaultListModel"%>
<%@page import="com.sas.servlet.tbeans.html.Button"%>
<%@page import="com.sas.servlet.tbeans.html.Label"%>
<%@page import="com.sas.servlet.tbeans.form.html.ListBox"%>
<%@page import="com.sas.servlet.tbeans.dualselector.html.DualListSelector"%>

<html>
<head>
    <link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
</head>
<body>

<%
	DefaultListModel listModel = new DefaultListModel();
	listModel.addElement("Item 1");
	listModel.addElement("Item 2");
	listModel.addElement("Item 3");
	listModel.addElement("Item 4");
	listModel.addElement("Item 5");
	listModel.addElement("Item 6");
	session.setAttribute("listModel", listModel); 
%>

	<sas:DualListSelector id="dualListSelector1" model="listModel" render="false" />
	
<%
	Button rightButton = 
	   (Button)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_RIGHT_BUTTON);
	Button leftButton = 
	   (Button)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_LEFT_BUTTON);
	Button rightAllButton = 
	   (Button)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_RIGHT_ALL_BUTTON);
	Button leftAllButton = 
	   (Button)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_LEFT_ALL_BUTTON);
	Button downButton = 
	   (Button)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_DOWN_BUTTON);
	Button upButton = 
	   (Button)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_UP_BUTTON);
	Button submitButton = 
	   (Button)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_SUBMIT_BUTTON);
	      
	//Add tooltips for the buttons
	rightButton.setTitle("Move To Target");
	leftButton.setTitle("Move To Source");
	rightAllButton.setTitle("Move All To Target");
	leftAllButton.setTitle("Move All To Source");
	downButton.setTitle("Move Down");
	upButton.setTitle("Move Up");
	 
	//The default visible state is true.  
	//If visible is set to false, the components will not be written out
	rightAllButton.setVisible(true);
	leftAllButton.setVisible(true);
	
	upButton.setImage("images/arrow-up-default.gif");
	downButton.setImage("images/arrow-down-default.gif");     
	         
	submitButton.setLabel("OK");
	submitButton.setTitle("Submit Selections");
	
	Label sourceLabel = 
	   (Label)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_SOURCE_LABEL);
	Label targetLabel = 
	   (Label)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_TARGET_LABEL);
	sourceLabel.setText("Available");
	targetLabel.setText("Selected");
	
	ListBox sourceListBox = 
	   (ListBox)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_SOURCE);
	ListBox targetListBox = 
	   (ListBox)dualListSelector1.getComponent(DualListSelector.DUALSELECTOR_TARGET);
	sourceListBox.setSelectedItem("Item 2");
	targetListBox.setOnClick("alert('target listbox clicked')");
%>

	<sas:DualListSelector ref="dualListSelector1" render="true"/>
</body>
</html>

Code for changeStyles.jsp

<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="javax.swing.DefaultListModel"%>
<%@page import="com.sas.servlet.tbeans.dualselector.html.DualListSelector"%>
<%@page import="com.sas.servlet.tbeans.StyleInfo"%>
<%@page import="java.util.Map"%>
<html>

<head>
    <style>
    .myContainer { border-style: dashed; border-width: medium;border-color: #F1EACB;}
    .mySourceListBox, .myTargetListBox{ width:200; color:#3872ac;}
    .mySourceLabel, .myTargetLabel{background-color="#3872ac";color:#F1EACB;font-family: 
                     Trebuchet MS, Helvetica, sans-serif;font-weight: bold;}
    </style>
</head>

<body>
<%
	DefaultListModel listModel = new DefaultListModel();
	listModel.addElement("Item 1");
	listModel.addElement("Item 2");
	listModel.addElement("Item 3");
	listModel.addElement("Item 4");
	listModel.addElement("Item 5");
	listModel.addElement("Item 6");
	session.setAttribute("listModel", listModel); 
%>

	<sas:DualListSelector id="dualListSelector1" model="listModel" render="false" />	
	
<%
	Map map = dualListSelector1.getStyleMap();
	map.put(DualListSelector.DUALSELECTOR_CONTAINER, new StyleInfo("myContainer"));
	map.put(DualListSelector.DUALSELECTOR_SOURCE_LISTBOX, new StyleInfo("mySourceListBox"));
	map.put(DualListSelector.DUALSELECTOR_TARGET_LISTBOX, new StyleInfo("myTargetListBox"));
	map.put(DualListSelector.DUALSELECTOR_SOURCE_LABEL_AREA, new StyleInfo("mySourceLabel"));
	map.put(DualListSelector.DUALSELECTOR_TARGET_LABEL_AREA, new StyleInfo("myTargetLabel"));
%>

	<sas:DualListSelector ref="dualListSelector1" render="true"/>
	
</body>
</html>

Code for changeTemplate.jsp

To use this template, you must also add the DualListSelector_Custom.html template found below:

<%@ taglib uri="http://www.sas.com/taglib/sas" prefix="sas" %>
<%@ page pageEncoding="UTF-8"%>
<%@page import="javax.swing.DefaultListModel"%>
<%@page import="javax.swing.ListModel"%>
<%@page import="com.sas.servlet.tbeans.form.html.TextEntry"%>
<html>
<head>
	<link href="styles/sasComponents.css" rel="STYLESHEET" type="text/css">
</head>

<body>
<%
	ListModel listmodel = new DefaultListModel();
	((DefaultListModel)listmodel).addElement("Item 1");
	((DefaultListModel)listmodel).addElement("Item 2");
	((DefaultListModel)listmodel).addElement("Item 3");
	((DefaultListModel)listmodel).addElement("Item 4");
	((DefaultListModel)listmodel).addElement("Item 5");
	((DefaultListModel)listmodel).addElement("Item 6");
	session.setAttribute("listmodel", listmodel); 
%>

<sas:DualListSelector id="dualListSelector1" model="listmodel" render="false" />	

<%
	dualListSelector1.setTemplateFileName("DualListSelector_Custom.html");
	TextEntry textentry = new TextEntry();
	textentry.setName("search");
	dualListSelector1.setComponent("DUALSELECTOR_TEXTENTRY", textentry);
%>
	
<sas:DualListSelector ref="dualListSelector1" render="true"/>
</body>
</html>

Code for DualListSelector_Custom.html

This file must be created under the templates directory in the Web application:

<table border="0" cellspacing="0" cellpadding="0" class="%DUALSELECTOR_CONTAINER">
<tr>
<td class="%DUALSELECTOR_SOURCE_LABEL_AREA">%DUALSELECTOR_SOURCE_LABEL</td>
<td> </td>
<td class="%DUALSELECTOR_TARGET_LABEL_AREA">%DUALSELECTOR_TARGET_LABEL</td>
</tr>
<tr>
<td>%DUALSELECTOR_SOURCE </td>
<td valign="center" align="center" nowrap="nowrap">
<table>
<tr>
<td>%DUALSELECTOR_RIGHT_BUTTON</td>
</tr>
<tr>
<td>%DUALSELECTOR_LEFT_BUTTON</td>
</tr>
<tr>
<td height="10px"></td>
</tr>
<tr>
<td>%DUALSELECTOR_RIGHT_ALL_BUTTON</td>
</tr>
<tr>
<td>%DUALSELECTOR_LEFT_ALL_BUTTON</td>
</tr>
</table>
</td>
<td>%DUALSELECTOR_TARGET</td>
</tr>
<tr><td>%DUALSELECTOR_TEXTENTRY</td></tr>
<tr>
<td colspan="3" align="right">%DUALSELECTOR_SUBMIT_BUTTON</td>
</tr>
</table>

---

These sample files and code examples are provided by SAS Institute Inc. "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. Recipients acknowledge and agree that SAS Institute shall not be liable for any damages whatsoever arising out of their use of this material. In addition, SAS Institute will provide no support for the materials contained herein.

Default view

Changing properties on the buttons, labels and ListBoxes

Changing style classes

Changing the selector visuals using templates

Operating System and Release Information